import { useState,Suspense } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import router from './router'

function App() {

  const render = (data) => {
    return data.map(item => {
      return <Route key={item.path} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>} >
        {
          item.children && render(item.children)
        }
      </Route>
    })
  }

  return (
    <>
      <Suspense fallback={<img style={{width:'100%'}} src='https://img0.baidu.com/it/u=2832877788,4157240035&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'></img>}>
        <BrowserRouter>
          <Routes>
            {
              render(router)
            }
          </Routes>
        </BrowserRouter>
      </Suspense>
    </>
  )
}

export default App
